import React from 'react';
import { getLotteryCode } from '../store/index';

export default function CanvasContainer() {
    const lotteryCode = getLotteryCode();

    const width = document.body.offsetWidth;
    const height = document.body.offsetHeight;

    return (
        <>
            <div id="tags">
                <ul>
                    {lotteryCode.map((item, key) => {
                        return (
                            <li key={key}>
                                <a href="javascript:void(0);" style={{
                                    color: '#fff'
                                }}>
                                    { item.name ? item.name : item.key }
                                    { item.photo ? <img src={item.photo} style={{
                                        borderRadius: '30px'
                                    }} width="30" height="30"/> : '' }
                                </a>
                            </li>
                        )
                    })}
                </ul>
            </div>
            <canvas id="rootcanvas" width={width} height={height}></canvas>
        </>
    )
}